import "../css/help.css";
import REST from "@module/Rest";
import Menu from "@ui/RJMart/menu";
import ZenUI from "@root/components/zenUi/ZenUI";
function HelpSibar(props) {

    //初始化插件入参
    const {columntype,updateproblemslist,selectcolumn,targettype} = props;

    //初始化插件状态值及状态更新方法
    const [helpSibarStatus, updatehelpSibarStatus] = usePartState({
        siderBarList:[],
        selectedColumn:selectcolumn,
        selectedColumnName:""
    })

    //更新视图数据 私有的方法前缀用_
    function _updateData(value) {
        let newValue = { ...helpSibarStatus, ...value };
        console.log(newValue);
        updatehelpSibarStatus(newValue);
    }

    //更新视图数据方法外部接口
    function updateFunctions(param1,param2,param3){
        console.log(param1,param2);
        _updateData(
            (helpSibarStatus.siderBarList = param1),
            (helpSibarStatus.selectedColumn = param2),
            (helpSibarStatus.selectedColumnName = param3)
        )
    }

    //遍历全部栏目
    function eachColumn(item,index) {
        console.log("eachColumn",item);
        let itemModel = {};
        itemModel.id = item.dto.id;
        itemModel.name = item.dto.columnName;
        if(item.hasOwnProperty("list")&&item.list.length>0){
            itemModel.childModel = [];
            item.list.map((subItem,subIndex) =>{
                let subModel = {}
                subModel.id = subItem.column.id;
                subModel.name = subItem.column.columnName;
                console.log("eachColumn",subItem)
                if(subItem.hasOwnProperty("list")&&subItem.list.length>0){
                    subModel.childModel = [];
                    subItem.list.map((subItem2,subIndex2) =>{
                        let subModel2 = {}
                        subModel2.id = subItem2.id;
                        subModel2.name = subItem2.columnName;
                        subModel.childModel.push(subModel2);
                    })
                }
                itemModel.childModel.push(subModel);

            })
            console.log("eachColumn",item,itemModel);
            return itemModel;
        }else{
            console.log("eachColumn",item,itemModel);
            return itemModel;
        }
    }

    //根据id确定栏目名称
    function idToColumnName(id,data){
        let columnName = ""
        data.map((item,index) =>{
            if(item.id == id){
                columnName = item.name;
            }else if(item.hasOwnProperty("childModel")){
                item.childModel.map((subItem,subIndex) =>{
                    if(subItem.id == id){
                        columnName = subItem.name
                    }else if(subItem.hasOwnProperty("childModel")){
                        subItem.childModel.map((subItem2,subIndex2) =>{
                            if(subItem2.id == id){
                                columnName = subItem2.name;
                            }
                        })
                    }
                })
            }
        })
        return columnName;
    }

    //获取侧边栏分类数据
    function getSiBar(columntype,selectedColumn){
        let url = "/cms/column/getListByType/"+columntype;
        REST.post(url,{}).then(
            data => {
                if (data.msg == "操作成功"||data.resultCode=="0000") {
                    //updateLoadFunctions(data.data);
                    let loadData = [];
                    data.volist.map((item,index) =>{
                        let inputItem = eachColumn(item, index)
                        loadData.push(inputItem);
                    })
                    let selectedColumnName = idToColumnName(selectedColumn,loadData);
                    let columnInput = {
                        currentPage:1,
                        pageSize:10,
                        columnType:columntype
                    }
                    console.log("getSiBar",loadData,data,selectedColumn,selectcolumn,selectedColumnName);
                    if(selectedColumn == 0){
                        if (loadData.length>0){
                            selectedColumnName = loadData[0].name;
                        }
                        console.log("getSiBar1",selectedColumn,targettype,$state.params.search);
                        updateFunctions(loadData,selectedColumn,selectedColumnName);
                        updateproblemslist(columnInput,selectedColumn,selectedColumnName);
                    }else {
                        updateFunctions(loadData,selectedColumn,selectedColumnName);
                        if(targettype == 1&&(!($state.params.hasOwnProperty("search")&&$state.params.search!=""))){
                            console.log("getSiBar2",selectedColumn,targettype,$state.params);
                            selectMenu(selectedColumn,loadData);
                        }else{
                            console.log("getSiBar3",selectedColumn,targettype,$state.params.search);
                            updateproblemslist(columnInput,selectedColumn,selectedColumnName);
                        }
                    }
                }else{
                    ZenUI.ST(data.msg, 2);
                }
            },
            error => {}
        );
    }

    //选中菜单
    function selectMenu(id,menuList){
        console.log("selectMenu",id);
        let target = id;
        let targetName = idToColumnName(target,menuList);
        localStorage.setItem("selectedColumn",targetName);
        //updateproblemslist(columnInput,target,targetName);
        $state.go({
            stateName: "/HelpProblems",
            params: {
                columnId:target,
                articleId:0,
                targetType:1,
                publishTime:0,
                search:""
            }
        })
    }


    //componentOnMount
    React.useEffect(() => {
        console.log("refresh view");
        console.log(helpSibarStatus);
        getSiBar(columntype,selectcolumn)
    },[]);

    return (
        <div className="zen_bg-FFFFFF rj_sidebar-wp zen_m-b-30 zen_il-bl zen_w-p20 zen_v-t" style={{minHeight:"700px"}}>
            <Menu size="large" theme="theme-blue" style={{ minWidth: "165px",width:"100%",border:"none" }} selectedKey={helpSibarStatus.selectedColumn} uncollapsed={true} onSelectChange={e =>{selectMenu(e.target.value,helpSibarStatus.siderBarList)}}>
                {helpSibarStatus.siderBarList[0]!=undefined?helpSibarStatus.siderBarList.map((item, index) => {
                    return(
                        <div>
                            <Menu.Item id={item.id} style={{borderBottom:"1px solid #eee",fontSize:"16px"}}>
                                {item.name}
                            </Menu.Item>
                            {item.childModel&&item.childModel.map((it, i) => {
                                return(
                                    <div>
                                        <Menu.Item id={it.id} style={{borderBottom:"1px solid #eee"}}>
                                            <div style={{paddingLeft:"16px",fontSize:"16px"}}>
                                            {it.name}
                                            </div>
                                        </Menu.Item>
                                        {it.childModel&&it.childModel.map((it2, i) => {
                                            console.log("Menu",it2);
                                            return (
                                                <div>
                                                    <Menu.Item id={it2.id} style={{borderBottom:"1px solid #eee"}}>
                                                        <div style={{paddingLeft:"32px",fontSize:"16px"}}>
                                                            {it2.name}
                                                        </div>
                                                    </Menu.Item>
                                                </div>
                                            );
                                        })}
                                    </div>)
                            })}
                        </div>
                    )
                }):""}
            </Menu>
        </div>
    )
}

export default HelpSibar;